<template>
    <div>
        <el-row>
            <el-col class="card left-card" :span="12">
                <el-tree ref="tree" check-strictly :data="treeData" default-expand-all show-checkbox
                         :default-checked-keys="roleMenu"
                         node-key="id"
                         :props="customProps"></el-tree>
                <div class="row-btn">
                    <el-button size="small" type="primary" @click="updateMenu">更新菜单</el-button>
                </div>
            </el-col>
            <el-col class="card" :span="12">
                <el-collapse>
                    <el-checkbox-group v-model="roleCategoryResource">
                        <el-collapse-item v-for="item in categoryResource" :key="item.name" :title="item.name">
                            <div v-if="item.resources.length == 0">
                                这里空空如也~
                            </div>
                            <div v-else :key="resource.id" v-for="resource in item.resources" class="resourceList">
                                <el-checkbox :label="resource.id">{{ resource.name }}</el-checkbox>
                                <el-tag size="mini" type="success" class="resourceUrl">{{ resource.url }}</el-tag>
                            </div>
                        </el-collapse-item>
                    </el-checkbox-group>
                </el-collapse>
                <div class="row-btn">
                    <el-button size="small" @click="updateResource" type="primary">更新权限</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getUmsMenuList, getRoleMenuList, updateRoleMenu} from '@/api/UmsMenu'
import {getUmsResourceCategoryList} from '@/api/UmsResourceCategory'
import {getRoleResourceList, updateRoleResource} from '@/api/UmsResource'

export default {
  name: 'UmsMenu',
  data () {
    return {
      roleID: 0,
      treeData: [],
      roleMenu: [],
      categoryResource: [],
      roleCategoryResource: [],
      customProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created () {
    this.roleID = this.$route.params.id
    this.getUmsMenu()
    this.getCategoryResource()
  },
  mounted () {
    this.getRoleMenu()
    this.getRoleResource()
  },
  methods: {
    getUmsMenu () {
      getUmsMenuList().then(res => {
        this.treeData = res.data
      })
    },
    getRoleMenu () {
      getRoleMenuList(this.roleID).then(res => {
        this.roleMenu = res.data
      })
    },
    getCategoryResource () {
      getUmsResourceCategoryList().then(res => {
        this.categoryResource = res.data
      })
    },
    getRoleResource () {
      getRoleResourceList(this.roleID).then(res => {
        this.roleCategoryResource = res.data
      })
    },
    updateMenu () {
      let checked = this.$refs.tree.getCheckedKeys()
      updateRoleMenu(this.roleID, checked).then(res => {
        this.$notify.success({
          title: '消息',
          message: res.message
        })
      })
    },
    updateResource () {
      updateRoleResource(this.roleID, this.roleCategoryResource).then(res => {
        this.$notify.success({
          title: '消息',
          message: res.message
        })
      })
    }
  }
}
</script>

<style scoped>

.resourceList {
    padding: 5px;
}

.resourceUrl {
    padding-left: 5px;
}

.row-btn {
    padding: 10px;
    text-align: center;
}

.card {
    padding: 0 5px;
}

</style>
